<!-- 工作区的开头 -->
<div class="content-header">
	<div class="container-fluid">
		<div class="row mb-2">
			<div class="col-sm-6">
				<h1 class="m-0">科目数据显示</h1>
			</div>
		</div>
	</div>
</div>
<!-- 主要内容 -->
<section id="main-info" class="content">
	<div class="container-fluid">

		<div class="card">
			<div class="card-header">
				<button id="btnSubjectAdd" type="button" class="btn btn-primary btn-lg">添加</button>
			</div>
			<!-- /.card-header -->
			<div class="card-body">
				<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
					<div class="row">
						<div class="col-sm-12">
							<table id="example2" class="table table-bordered table-hover dataTable dtr-inline"
								   aria-describedby="example2_info">
								<thead>
								<tr>
									<th class="sorting sorting_asc text-center" tabindex="0" aria-controls="example2" rowspan="1"
										colspan="1" aria-sort="ascending"
										aria-label="Rendering engine: activate to sort column descending" style="width: 20%">ID
									</th>
									<th class="sorting text-center" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
										aria-label="Browser: activate to sort column ascending" style="width: 60%">科目
									</th>
									<th class="sorting text-center" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
										aria-label="Platform(s): activate to sort column ascending" style="width: 20%">操作
									</th>
								</tr>
								</thead>
								<tbody id="subjectTbody">
								<tr class="odd">
									<td class="dtr-control sorting_1 text-center" tabindex="0">Gecko</td>
									<td class="text-center">Firefox 1.0</td>
									<td class="text-center">
										<button type="button" class="btn btn-primary">修改</button>
										&nbsp;&nbsp;&nbsp;&nbsp;
										<button type="button" class="btn btn-danger">删除</button>
									</td>
								</tr>
								<tr class="even">
									<td class="dtr-control sorting_1 text-center" tabindex="0">Gecko</td>
									<td class="text-center">Firefox 1.5</td>
									<td class="text-center">
										<button type="button" class="btn btn-primary">修改</button>
										&nbsp;&nbsp;&nbsp;&nbsp;
										<button id="subjectDel" type="button" class="btn btn-danger">删除</button>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<!-- /.card-body -->
		</div>

	</div>
</section>

<!--添加模态框，修改模态框-->
<div class="modal fade" id="dialogSubject" tabindex="-1" role="dialog" aria-labelledby="subjectH4Title">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="subjectH4Title">科目信息添加</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="card-body">
						<div class="form-group row">
							<label class="col-sm-2 col-form-label">ID</label>
							<div class="col-sm-10">
								<input id="subjectId"  type="text" readonly class="form-control" placeholder="id会系统填写">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-2 col-form-label">名称</label>
							<div class="col-sm-10">
								<input id="subjectName" type="text" class="form-control" placeholder="请填写名称">
							</div>
						</div>
					</div>
				</form>


			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button id="btnSubjectAction" type="button" class="btn btn-primary">添加</button>
			</div>
		</div>
	</div>
</div>

<script>

	// ajax异步请求获取所有数据的方法
	function subjectGetAll() {
		$.ajax({
		    // 异步请求的地址
		    url: "/subject/getAll.action",
		    // 默认是get请求
		    type: "get",
		    // 后端返回数据的格式JSON
		    dataType: "json",
		    // 前端组织参数，准备提交给后端
		    data:{},


		    // 请求之前做的事情
		    beforeSend: function (XMLHttpRequest) {
		        console.log("请求之前做的事情.......");
		    },

		    // 请求成功做的事情
		    success: function (data, textStatus) {
		        console.log("请求成功做的事情........");

		        // 删除标签中已有的数据
		        $("#subjectTbody").empty();

		        $.each(data.data, function (i, n) {
		            $("#subjectTbody").append('<tr class="odd">\n' +
							'\t\t\t\t\t\t\t\t\t<td class="dtr-control sorting_1 text-center" tabindex="0">'+ n.id +'</td>\n' +
							'\t\t\t\t\t\t\t\t\t<td class="text-center">' + n.name + '</td>\n' +
							'\t\t\t\t\t\t\t\t\t<td class="text-center">\n' +
							'\t\t\t\t\t\t\t\t\t\t<button onclick="editBefore('+ n.id +')" type="button" class="btn btn-primary">修改</button>\n' +
							'\t\t\t\t\t\t\t\t\t\t&nbsp;&nbsp;&nbsp;&nbsp;\n' +
							'\t\t\t\t\t\t\t\t\t\t<button onclick="del('+ n.id +')" type="button" class="btn btn-danger">删除</button>\n' +
							'\t\t\t\t\t\t\t\t\t</td>\n' +
							'\t\t\t\t\t\t\t\t</tr>');
		        });

		    },

		    // 请求失败做的事情
		    error: function (XMLHttpRequest, textStatus, errorThrown) {
		        console.log("请求失败做的事情.......");
		    },

		    // 请求完毕做的事情
		    complete: function (XMLHttpRequest, textStatus) {
		        console.log("请求完毕做的事情.......");
		    }
		});
	}

	// 调用获取数据的方法
	subjectGetAll();

	// 添加按钮的点击事件
	$("#btnSubjectAdd").click(function () {
		$("#dialogSubject").data("option", 0);
		$("#dialogSubject").modal("show");
	});

	// 修改按钮的点击事件
	function editBefore(id) {
		$("#dialogSubject").data("option", 1);
		$("#dialogSubject").data("id", id);
		$("#dialogSubject").modal("show");
	}

	// show方法调用之后立即触发的事件
	$("#dialogSubject").on("show.bs.modal", function (event) {
		if ($("#dialogSubject").data("option") === 0){
			$("#subjectId").val("");
			$("#subjectName").val("")

			$("#subjectH4Title").text("科目信息添加");
			$("#btnSubjectAction").text("添加");
		}else {
			$("#subjectH4Title").text("科目信息修改");
			$("#btnSubjectAction").text("修改");

			$.ajax({
			    // 异步请求的地址
			    url: "/subject/editBefore.action",
			    // 默认是get请求
			    type: "get",
			    // 后端返回数据的格式JSON
			    dataType: "json",
			    // 前端组织参数，准备提交给后端
			    data:{
					id:$("#dialogSubject").data("id")
				},


			    // 请求之前做的事情
			    beforeSend: function (XMLHttpRequest) {
			        console.log("请求之前做的事情.......");
			    },

			    // 请求成功做的事情
			    success: function (data, textStatus) {
			        console.log("请求成功做的事情........");

			        $("#subjectId").val(data.data.id);
			        $("#subjectName").val(data.data.name);

			    },

			    // 请求失败做的事情
			    error: function (XMLHttpRequest, textStatus, errorThrown) {
			        console.log("请求失败做的事情.......");
			    },

			    // 请求完毕做的事情
			    complete: function (XMLHttpRequest, textStatus) {
			        console.log("请求完毕做的事情.......");
			    }
			});
		}
	})

	// 模态框的添加点击事件
	$("#btnSubjectAction").click(function () {
		if ($("#dialogSubject").data("option") === 0){
			$.ajax({
			    // 异步请求的地址
			    url: "/subject/add.action",
			    // 默认是get请求
			    type: "post",
			    // 后端返回数据的格式JSON
			    dataType: "json",
			    // 前端组织参数，准备提交给后端
			    data:{
					name:$("#subjectName").val()
				},


			    // 请求之前做的事情
			    beforeSend: function (XMLHttpRequest) {
			        console.log("请求之前做的事情.......");
			    },

			    // 请求成功做的事情
			    success: function (data, textStatus) {
			        console.log("请求成功做的事情........");

					if (data.result === "success"){
						// 添加成功关闭模态框
						$("#dialogSubject").modal("hide");

						// 刷新表格
						subjectGetAll();
					}else {
						alert(data.error);
					}

			    },

			    // 请求失败做的事情
			    error: function (XMLHttpRequest, textStatus, errorThrown) {
			        console.log("请求失败做的事情.......");
			    },

			    // 请求完毕做的事情
			    complete: function (XMLHttpRequest, textStatus) {
			        console.log("请求完毕做的事情.......");
			    }
			});
		}else {
			$.ajax({
			    // 异步请求的地址
			    url: "/subject/edit.action",
			    // 默认是get请求
			    type: "post",
			    // 后端返回数据的格式JSON
			    dataType: "json",
			    // 前端组织参数，准备提交给后端
			    data:{
					id:$("#subjectId").val(),
					name:$("#subjectName").val()
				},


			    // 请求之前做的事情
			    beforeSend: function (XMLHttpRequest) {
			        console.log("请求之前做的事情.......");
			    },

			    // 请求成功做的事情
			    success: function (data, textStatus) {
			        console.log("请求成功做的事情........");

					// 判断是否添加成功
			        if (data.result === "success"){
						// 添加成功关闭模态框
						$("#dialogSubject").modal("hide");

						// 刷新数据
						subjectGetAll();
					}else {
						// 添加失败弹框提示
						alert(data.error);
					}

			    },

			    // 请求失败做的事情
			    error: function (XMLHttpRequest, textStatus, errorThrown) {
			        console.log("请求失败做的事情.......");
			    },

			    // 请求完毕做的事情
			    complete: function (XMLHttpRequest, textStatus) {
			        console.log("请求完毕做的事情.......");
			    }
			});
		}
	});

	// 删除按钮单击事件
	function del(id){
		var result = confirm("确定要删除该数据吗?");

		if (result){
			$.ajax({
			    // 异步请求的地址
			    url: "/subject/del.action",
			    // 默认是get请求
			    type: "get",
			    // 后端返回数据的格式JSON
			    dataType: "json",
			    // 前端组织参数，准备提交给后端
			    data:{
					id:id,
				},


			    // 请求之前做的事情
			    beforeSend: function (XMLHttpRequest) {
			        console.log("请求之前做的事情.......");
			    },

			    // 请求成功做的事情
			    success: function (data, textStatus) {
			        console.log("请求成功做的事情........");

			        // 判断是否删除成功
					if (data.result === "success"){
						// 刷新数据
						subjectGetAll();
					}else {
						alert(data.error);
					}

			    },

			    // 请求失败做的事情
			    error: function (XMLHttpRequest, textStatus, errorThrown) {
			        console.log("请求失败做的事情.......");
			    },

			    // 请求完毕做的事情
			    complete: function (XMLHttpRequest, textStatus) {
			        console.log("请求完毕做的事情.......");
			    }
			});
		}
	}


</script>

